// Default MUI breakpoints
// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
$mui-bp-sm: 600px;
$mui-bp-md: 900px;
$mui-bp-lg: 1200px;
$mui-bp-xl: 1536px;

#reactRoot {
    height: 100%;
}

// Hide some items from the user "settings" page that are in the drawer
#myPreferencesMenuPage {
    .lnkQuickConnectPreferences,
    .adminSection,
    .userSection {
        display: none !important;
    }
}

// Fix the padding of some pages
.homePage.libraryPage.withTabs, // Home page
// Library pages excluding the item details page and tabbed pages
.libraryPage:not(
    .itemDetailPage
) {
    padding-top: 3.25rem !important;
}

.layout-mobile {
    .itemBackdrop {
        // Fix backdrop position on mobile item details page
        margin-top: 0 !important;

        // Add a subtle gradient over the backdrop to ensure the app bar buttons are visible
        &::before {
            display: block;
            content: "";
            height: 100%;
            width: 100%;
            background: linear-gradient(180deg, rgba(32, 32, 32, 0.6) 0%, rgba(32, 32, 32, 0.2) 4rem, rgba(0, 0, 0, 0) 50%);
        }
    }
}
